<template>
    <div>

        <div class="container" style="width: 95%">
            <h2>员工考勤界面</h2>
            <div>
                <el-button type="success" class="btn-base" icon="el-icon-document-add" @click="dialogNewVisible=true,form2={}">添加员工</el-button>
            </div>
            <el-table
                    :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        label="签到时间"
                        prop="registTime1"
                        width="200">
                    <template slot-scope="scope">{{ scope.row.registTime1 }}</template>
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="联系电话"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="identityCardNumber"
                        label="身份证号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="regist"
                        label="到岗"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="leave"
                        label="请假"
                        width="100">
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                :disabled="scope.row.regist==='否'"
                                @click="handleWork(scope.$index, scope.row)" icon="el-icon-date">分配任务</el-button>
                        <el-button
                                type="success"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
                title="工作分配"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form ref="form" :model="form1" label-width="80px">
                <el-form-item label="工作内容">
                    <el-input type="textarea" v-model="form1.reason"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveWork">确 定</el-button>
          </span>
        </el-dialog>
        <!--       //编辑用户弹窗-->
        <el-dialog title="编辑员工信息" :visible.sync="dialogEditVisible" >
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth" >
                    <el-input v-model="form.userName" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.identityCardNumber"  width="60%"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="form.tel" autocomplete="off" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" type="password" width="60%"><el-button icon="el-icon-view"></el-button></el-input>
                </el-form-item>
                <el-form-item label="到岗" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.regist">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="请假" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.leave">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label=" form.leave==='是' ? '请假原因':'工作内容'" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.reason"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveInfo">确 定</el-button>
            </div>
        </el-dialog>
        <!--       //添加员工-->
        <el-dialog title="添加员工信息" :visible.sync="dialogNewVisible"  >
            <el-form :model="form2" :rules="rules">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
                    <el-input v-model="form2.userName" width="60%" placeholder="输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth" prop="identityCardNumber">
                    <el-input v-model="form2.identityCardNumber"  width="60%" placeholder="输入身份证号"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth" prop="tel">
                    <el-input v-model="form2.tel"  width="60%" placeholder="输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth"  prop="password">
                    <el-input v-model="form2.password"  width="60%" placeholder="输入密码" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogNewVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUserInfo">确 定</el-button>
            </div>
        </el-dialog>
        </div>
</template>

<script>
    import {
        requestAddUserInfo,
        requestDeleteManageInfo, requestDeleteUserById,
        requestGetAllUserInfo, requestGetAllUserInfoByMark,
        requestGetManageInfo, requestUpdateManageInfo,
        requestUpdateReason, requestUpdateUserInfo
    } from '../../../../api';

    export default {
        name: 'CheckEmployee',
        data(){
            return {
                search:'',
                dialogNewVisible:false,
                formLabelWidth: '120px',
                dialogEditVisible:false,
                currentEmployee:'',
                form:{},
                form1:{},
                form2:{
                    userName:'',
                    identityCardNumber:'',
                    tel:'',
                    password:''
                },
                isFill:false,
                rules:{
                    userName:[
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 6, message: '长度在 2到 6个字符', trigger: 'blur' }
                    ],
                    tel:[
                        { min: 11, max: 11, message: '输入11位电话号码', trigger: 'blur' },
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                            message: '手机号无效',
                            trigger: 'blur'
                        }
                    ],
                    identityCardNumber:[
                        { required: true, message: '请填写证件号码', trigger: 'blur' },
                        {
                            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                            message: '证件号码格式有误！',
                            trigger: 'blur'
                        }
                    ],
                    password:{required: true, message: '请输入密码', trigger: 'blur'}
                },
                dialogVisible:false,
                    tableData: [],
            }
        },
        created(){
            this.getAllInfo()
        },
        computed:{
            isfill(){
                return this.form2.identityCardNumber!==''&&this.form2.tel!==''&&this.form2.userName!==''&&this.form2.password!==''
            }
        },
        methods:{
             //新增用户
            async saveUserInfo(){
                this.dialogNewVisible=false
                let json={
                    userName:this.form2.userName,
                    tel:this.form2.tel,
                    mark:2,
                    password:this.form2.password,
                    identityCardNumber:this.form2.identityCardNumber
                    }
                const res = await requestAddUserInfo(json).catch(()=>"error")
                if('error'!==res){
                    console.log(res)
                    this.$message({
                        message: '添加员工成功',
                        type: 'success'
                    });
                    this.getAllInfo()
                }
            },
            //保存编辑
            async saveInfo(){
                this.dialogEditVisible=false
                console.log(this.form)
                let json={
                    id:this.form.id,
                    userName:this.form.userName,
                    tel:this.form.tel,
                    regist:this.form.regist==='是'?true:false,
                    registTime:this.form.registTime,
                    reason:this.form.reason,
                    leave:this.form.leave==='否'?true:false
                }
                //修改用户信息
                let json1={
                    id:this.form.id,
                    userName:this.form.userName,
                    tel:this.form.tel,
                    identityCardNumber: this.form.identityCardNumber
                }
                console.log(json)
                const res = await requestUpdateManageInfo(json).catch(()=>"error")
                const res1 = await requestUpdateUserInfo(json1).catch(()=>"error")
                if("error"!==res&&"error"!==res1){
                    this.$message({
                        message: '员工信息修改成功',
                        type: 'success'
                    });
                }
            },
            //编辑
            handleEdit(index,row){
                this.currentEmployee=row
                this.form =this.currentEmployee
                this.dialogEditVisible=true
            },
            //保存分配任务
            async saveWork(){
                this.dialogVisible = false
                let json = {
                    id:this.currentEmployee.id,
                    registTime:this.currentEmployee.registTime,
                    reason:this.form1.reason
                }
                console.log(json)
                //将分配的任务写到签到的员工的reason字段
                const res = await requestUpdateReason(json).catch(()=>'error')
                if('error'!==res){
                    this.$message({
                        message: '任务分配成功',
                        type: 'success'
                    });
                    this.form1={}
                    this.getAllInfo()
                }
            },
            handleClose(){
                this.dialogVisible=false
            },
            handleWork(index,row){
                this.currentEmployee=row
                console.log(this.currentEmployee)
                this.dialogVisible=true
            },
            handleSelectionChange(val) {
                console.log(this.multipleSelection)
                this.multipleSelection = val;
            },
            tableRowClassName({row,index}) {
                console.log(row,index)
                if (row.leave === '是') {
                    return 'warning-row';
                } else if (row.regist === '是') {
                    return 'success-row';
                }else{
                    return ''
                }
            },
            //时间戳转为日期格式
     getLocalTime(nS) {
         return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
     },
    async getAllInfo(){
                this.tableData=[]
                let json1={mark:2}//获取员工信息
                const res1 = await requestGetAllUserInfoByMark(json1).catch(()=>"error")
                if("error"!==res1){
                    console.log(res1)
                    for(let i=0;i<res1.length;i++){
                        let temp={
                            id:res1[i].id,
                            userName:res1[i].userName,
                            tel:res1[i].tel,
                            identityCardNumber:res1[i].identityCardNumber,
                            password:res1[i].password,
                            registTime:'',
                            regist:'',
                            leave:'',
                            reason:''
                        }
                        //当天0点时间
                        let start = new Date(
                            new Date(new Date().toLocaleDateString()).getTime()
                        );
                        console.log(start)
                        console.log(Date.parse(start))
                        let json2={id:res1[i].id,
                                registTime:parseInt(start/1000)
                        }
                        const res2 = await requestGetManageInfo(json2).catch(()=>'error')
                        if("error"!==res2){
                            console.log(res2)
                            if(null!==res2.registTime){
                                temp.registTime1=this.getLocalTime(res2.registTime*1000)
                            }
                            temp.registTime=res2.registTime
                            temp.regist=res2.regist?'是':'否'
                            temp.leave=res2.leave?'是':'否'
                            temp.reason=res2.reason
                        }
                        this.tableData.push(temp)
                    }
                }
            },
            //删除
           async handleDelete(index,row){
                let json ={id:this.tableData[index].id}
                let json1={id:this.tableData[index].id,registTime:this.tableData[index].registTime}
                const res = await requestDeleteManageInfo(json1).catch(()=>'error')
               const res1 = await requestDeleteUserById(json).catch(()=>'error')
               if("error"!==res&&"error"!==res1){
                   this.$message({
                       message: '删除员工成功',
                       type: 'success'
                   });
                   console.log(res)
                   this.getAllInfo()
               }else{
                   this.$message({
                       message: '删除员工失败',
                       type: 'error'
                   });
               }
            }
        }

    };
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: greenyellow;
    }
    .btn-base{
        margin-bottom: 10px;
    }
</style>